<style media="screen">
    .business-config-container{
      padding: 24px 40px;
      overflow: hidden;
    }
    .type-container{
      float: left;
      width: 280px;
    }
    .business-config-wrap{
      border: 1px solid #e5e5e5;
      border-radius: 4px;
      height: 420px;
      overflow-y: scroll;
    }
    .business-config-wrap::-webkit-scrollbar{
      width:0;
    }
    .type-container p{
      height: 30px;
      line-height: 30px;
    }
    .business-config-wrap li{
      padding:0 8px;
      height: 46px;
      line-height: 46px;
      overflow: hidden;
    }
    .business-config-wrap .add{
      height: 46px;
      line-height: 46px;
      overflow: hidden;
    }
    .business-config-wrap li .name{
      height: 46px;
      width:210px;
      float: left;
    }
    .business-config-wrap li .show-state.active{
      display: none;
    }
    .business-config-wrap li.selected{
      background-color: #f9f9f9;
    }
    .business-config-wrap li .type-ipt,
    .business-config-wrap li .name-ipt{
      width:210px;
      float: left;
      margin-top: 6px;
    }
    .business-config-wrap li .edit-state{
      display: none;
    }
    .business-config-wrap li .edit-state.active{
      display: block;
    }
    .business-config-wrap li .icon{
      padding-top: 17px;
      width:18px;
      float: left;
      cursor: pointer;
      /* display: none; */
    }
    .business-config-wrap li:hover{
      background-color: #f9f9f9;
    }
    .business-config-wrap li:hover .icon{
      display: block;
    }
    .business-config-wrap .add{
      padding: 8px;
    }
    .business-config-wrap .add .name-ipt{
      width: 210px;
      float: left;
    }
    .business-config-wrap .add .icon{
      padding-top: 10px;
      width:18px;
      float: right;
      margin-right:15px;
      cursor: pointer;
    }
  
    .arrow-container{
      width:204px;
      min-height: 504px;
      float: left;
      position: relative;
    }
    .business-config-container .arrow-container .icon{
      color:#5e67a5;
      position: absolute;
      left:50%;
      top:50%;
      transform: translate(-50%,-50%);
      width: 20px;
      height: 20px;
      font-size: 24px;
    }
  </style>
  
  <section id="business-config">
    <div class="mlr-24">
      <div class="clearfix border-b ptb-10">
        <span class="pull-left line-height-34">系统配置-市场拓展配置-市场拓展渠道</span>
      </div>
    </div>
  
    <section class="business-config-container">
      <div class="type-container">
        <p>渠道分类</p>
        <ul class="business-config-wrap">
          <li v-for="(item,index) in channelTypeList" @click.stop="selectChannelType(item.dictName,item.dictCode,index)" :class="{'selected':item.isSelect == 'Y'}">
            <div class="show-state" :class="{'active':item.isEdit == 'Y'}" >
              <div class="name">{{item.dictName}}</div>
              <span class="icon-Gm-edit icon" @click.stop="editChannelType(index)"></span>
              <span style="margin-left:8px;" class="icon-Gm-delete icon text-right" @click.stop="delChannelType(item.dictCode,index)"></span>
            </div>
  
            <div class="edit-state" :class="{'active':item.isEdit == 'Y'}">
              <input type="text" class="type-ipt form-control" v-model="item.dictName" @blur="confirmEditChannelType(item.dictName,item.dictCode,index)">
              <span style="margin-left:20px;" class="icon-Gm-cancel icon" @click.stop="cancelEditChannelType(index)"></span>
            </div>
          </li>
          <!-- 新增 -->
          <div class="add" v-show="isShowChannelTypeIpt" @blur="hideChannelTypeIpt">
              <input type="text" autofocus="autofocus" class="form-control name-ipt" v-model="addTypeValue" @blur="confirmAddChannelType" v-focus>
              <span class="icon-Gm-cancel icon" @click="cancelAddChannelType"></span>
          </div>
        </ul>
        <button type="button" class="btn s-btn-default mtb-10" @click="addType">新增分类</button>
      </div>
  
      <div class="arrow-container">
        <span class="icon-turn-right icon"></span>
      </div>
  
      <div class="type-container">
        <p>渠道名称</p>
        <ul class="business-config-wrap">
          <li v-for="(item,index) in channelNameList">
            <div class="show-state" :class="{'active':item.isEdit == 'Y'}">
              <div class="name">{{item.dictName}}</div>
              <span class="icon-Gm-edit icon" @click.stop="editChannelName(index)"></span>
              <span style="margin-left:8px;" class="icon-Gm-delete icon text-right" @click.stop="delChannelName(item.dictCode,index)"></span>
            </div>
  
            <div class="edit-state" :class="{'active':item.isEdit == 'Y'}">
              <input type="text" class="name-ipt form-control" v-model="item.dictName" @blur="confirmEditChannelName(item.dictName,item.dictCode,index)">
              <span style="margin-left:20px;" class="icon-Gm-cancel icon" @click="cancelEditChannelName(index)"></span>
            </div>
  
          </li>
          <!-- 新增 -->
          <div class="add" v-if="isShowChannelNameIpt" @blur="hideChannelNameIpt">
              <input type="text" autofocus="autofocus" class="form-control name-ipt" v-model="addNameValue" @blur="confirmAddChannelName" v-focus>
              <span class="icon-Gm-cancel icon" @click="cancelAddChannelName"></span>
          </div>
        </ul>
        <button type="button" class="btn s-btn-default mtb-10" @click="addChannel">新增渠道</button>
      </div>
    </section>
  </section>
  
  <script src="modules/system_config/scripts/market_channel.js" charset="utf-8"></script>
  